<template>
  <div class="subtitle-container" @click="handleClick">{{ subtitle }}</div>
</template>

<script>
export default {
  name: "BscSubtitle",
  props: {
    subtitle: {
      type: String,
      required: true,
      default: "默认副标题"
    }
  },
  methods: {
    handleClick() {
      // console.log(11111111111111);
      // 向父组件发送点击事件
      this.$emit('click');
    }
  }
};
</script>

<style scoped lang="scss">
.subtitle-container {
  position: absolute;
  left: 29px;
  top: 40px;
  width: 118px;
  height: 27px;
  perspective: 118px;
  font-size: 18px;
  font-weight: normal;
  color: rgb(12, 211, 255);
  text-align: left;
  letter-spacing: 0px;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: rgb(0, 117, 255) 0px 0px 8px;
  padding: 0px;
  width: 88%;
  z-index: 10;
  transition: all 0.3s ease;

  // &:hover {
  //   transform: scale(1.05);
  //   filter: brightness(1.2);
  // }

  // &:active {
  //   transform: scale(0.98);
  // }
  background: url("~@/assets/images/titleimg.png") left center / 100% 100% no-repeat;
}
</style>
